<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{message}}
      <hr />
      计算属性： {{msg}}| {{msg}}
      <hr />

      方法实现：{{ strHandle()}} 方法实现：{{ strHandle()}}
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data() {
          return {
            message: "张三是一个人",
          };
        },
        methods: {
          strHandle() {
            // 被执行两次
            console.log("strHandle 方法执行了");
            // 处理逻辑
            var str = this.message.split("").reverse().join("");
            return str;
          },
        },

        // 计算属性
        computed: {
          // msg 函数 挂载vue实例中-属性
          //   模板中使用msg 变量 就会 获取  计算属性中 msg函数的返回值1-

          /* 
            1-比直接在模板中写代码容易维护 
            2-计算属性会被缓存--只要message 不变，那么什么时候 msg 只会计算一次
            
          
          */
          msg: function () {
            // 执行一次
            console.log("msg 函数执行了 计算属性");
            // 处理逻辑
            var str = this.message.split("").reverse().join("");
            return str;
          },
        },
      });
    </script>
  </body>
</html>
